<template>
  <div class="step-main flex">
    <div class="step-left">
      <SettingInput :title="'Name'" v-model="name" :placeholder="''"/>
      <p class="step-subtitle">Metastore</p>
      <SettingDropdown :title="'Engine'" :options="EngineOpts" v-model="st"/>
      <div class="flex">
        <SettingInput :title="'URL'" v-model="URL" :placeholder="''" class="ipt__contain"/>
        <SettingInput :title="'Port'" v-model="Port" :placeholder="''" :disabled="true"/>
      </div>
      <div class="flex">
        <SettingInput :title="'User'" v-model="User" :placeholder="''" class="ipt__contain" :disabled="true"/>
        <SettingInput :title="'Password'" v-model="Password" :placeholder="''" class="ipt__contain" style="margin-right: 0" :disabled="true"/>
      </div>
    </div>
    <div class="step-right">
      <p class="step-subtitle">Object Storage</p>
      <SettingDropdown :title="'Provider'" :options="ProviderOpts" v-model="Provider"/>
      <SettingInput :title="'BucketURL'" v-model="BucketURL" :placeholder="'https://<bucket>.s3.<region>.amazonaws.com'"/>
      <SettingInput :title="'AccessKey'" v-model="AccessKey" :placeholder="'<your-access-key>'"/>
      <SettingInput :title="'SecretKey'" v-model="SecretKey" :placeholder="'<your-secret-key>'"/>
    </div>
  </div>
</template>

<script setup>
import SettingInput from '@/components/fsConfig/SettingInput'
import SettingDropdown from '@/components/fsConfig/SettingDropdown'
import {ref} from "vue";

let name = ref('')

let st = ref('')
let EngineOpts = [
  {
    label: 'SQLite',
    key: 'SQLite',
  }
]
let ProviderOpts = [
  {
    label: 'Local File System',
    key: 'Local File System',
  }
]

let URL = ref('')
let Port = ref('')
let User = ref('')
let Password = ref('')

let Provider = ref('')
let BucketURL = ref('')
let AccessKey = ref('')
let SecretKey = ref('')

</script>

<style scoped>
.step-left {
  width: 40%;
  margin-right: 10%;
}
.step-right {
  width: 40%;
  flex: 1;
}
.ipt__contain {
  flex: 1;
  margin-right: 20px
}
.step-subtitle {
  margin-bottom: 20px;
  font-size: 32px;
}
</style>
